<template>
  <div>
    <v-md-editor :model-value="modelValue" :height="height + 'px'" :disabled-menus="[]"
      :include-level="[1, 2, 3, 4, 5, 6]" @upload-image="handleUploadImage" @change="change"></v-md-editor>
  </div>
</template>
<script setup>
import { createApp, getCurrentInstance } from 'vue';
import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
import Prism from 'prismjs';

const { proxy } = getCurrentInstance()
VMdEditor.use(vuepressTheme, {
  Prism,
});
const app = createApp(/*...*/)
app.use(VMdEditor);


const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  height: {
    type: Number,
    default: 500
  }
})

const emit = defineEmits()
const change = (markdownContent, htmlContent) => {
  emit('update:modelValue', markdownContent);
  emit('htmlContent', htmlContent);
}
const handleUploadImage = async (event, insertImage, files) => {
  let res = await proxy.Request({
    url: 'file/uploadImage',
    dataType: 'file',
    params: {
      file: files[0],
      type: 1
    }
  });
  if (!res) {
    return;
  }
  console.log(res);

  const url = proxy.globalInfo.imageUrl + res.data.fileName
  insertImage({
    url: url,
    desc: '图片',
  });
}
</script>
<style lang="">

</style>